<template>
  <el-container>
    <el-aside width="200px">
      <!--头像部分-->
      <el-row class="demo-avatar demo-basic">
        <el-col :span="12">
          <div class="demo-basic--circle">
            <div class="block">
              <el-avatar shape="square" :size="70" :src="squareUrl"></el-avatar>
            </div>
            <!--						<div class="block" v-for="size in sizeList" :key="size">
							<el-avatar :size="size" :src="circleUrl"></el-avatar>
						</div>-->
          </div>
        </el-col>
        <el-col :span="12">
          <div class="sub-title">欢迎你</div>
          <div>老司机</div>
        </el-col>
      </el-row>

      <!--导航部分-->
      <el-menu :default-active="activePath" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" router
        style="min-height: 1000px" unique-opened>
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>工作台</span>
          </template>
          <el-menu-item index="/client/personalcentre" @click="saveNavState('/client/personalcentre')">个人中心</el-menu-item>
        </el-submenu>

        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>订单管理</span>
          </template>
          <el-menu-item index="/client/order/order" @click="saveNavState('/client/order/order')">询价单</el-menu-item>
          <el-menu-item index="/client/order/checkorder" @click="saveNavState('/client/order/checkorder')">订单</el-menu-item>
        </el-submenu>

        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>运输管理</span>
          </template>
          <el-menu-item index="/client/tracking" @click="saveNavState('/client/tracking')">在途跟踪</el-menu-item>
        </el-submenu>

        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>合同管理</span>
          </template>
          <el-menu-item index="/client/contract" @click="saveNavState('/client/contract')">合同管理</el-menu-item>
          <el-menu-item index="/client/management" @click="saveNavState('/client/management')">查看处理合同</el-menu-item>
        </el-submenu>

        <el-submenu index="5">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>回单管理</span>
          </template>
          <el-menu-item index="/client/receipt" @click="saveNavState('/client/receipt')">回单管理</el-menu-item>
        </el-submenu>

        <el-submenu index="6">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>结算管理</span>
          </template>
          <el-menu-item index="/client/settlement" @click="saveNavState('/client/settlement')">订单结算</el-menu-item>
        </el-submenu>

        <el-submenu index="7">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>发票管理</span>
          </template>
<<<<<<< HEAD
          <el-menu-item index="/client/contractManagement">发票总览</el-menu-item>
          <el-menu-item index="/client/detail">查看详情</el-menu-item>
          <el-menu-item index="/client/kaiPiao">申请发票</el-menu-item>
=======
          <el-menu-item index="/client/invoice" @click="saveNavState('/client/invoice')">发票管理</el-menu-item>
>>>>>>> 0fe843eca306bdcbbc95a9e76e6fa0a740119d9c
        </el-submenu>

        <el-submenu index="8">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>系统管理</span>
          </template>
          <el-menu-item index="/client/system" @click="saveNavState('/client/system')">系统设置</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-main>
      <!-- 路由占位符 -->
      <router-view />
    </el-main>
  </el-container>
</template>

<style lang="less" scoped>
.el-aside {
  text-align: center;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  // text-align: center;
  height: 100%;
  min-height: 1075px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-menu {
  text-align: left;
}
div.el-submenu__title {
  height: 40px;
  line-height: 40px;
}
.el-submenu li.el-menu-item {
  height: 40px;
  line-height: 40px;
  min-width: 199px;
}
// .el-table tr{
//  height: 32px !important;
//  font-size: 16px !important;
// }
</style>

<script>
// @ is an alias to /src
import Receipt from "@/components/client/receipt/Receipt";

export default {
  name: "Carrier",
  data() {
    return {
      squareUrl:
        "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=570445447,3580198395&fm=26&gp=0.jpg",
      sizeList: ["large", "medium", "small"],
      activePath: "",
    };
  },
  components: {
    Receipt,
  },
  created() {
    this.activePath = window.sessionStorage.getItem("activePath");
  },
  methods: {
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    saveNavState(activePath) {
      window.sessionStorage.setItem("activePath", activePath);
      this.activePath = activePath;
    },
  },
  // 挂载后
  mounted() {
    // 让导航菜单的高度跟右侧内容高度一致
    let main = document.getElementsByClassName("el-main")[0];
    let menu = document.getElementsByClassName("el-menu-vertical-demo")[0];
    menu.style.height = parseInt(getComputedStyle(main).height) - 75 + "px";
  },
  // 更新后
  updated() {
    // 让导航菜单的高度跟右侧内容高度一致
    let main = document.getElementsByClassName("el-main")[0];
    let menu = document.getElementsByClassName("el-menu-vertical-demo")[0];
    menu.style.height = parseInt(getComputedStyle(main).height) - 75 + "px";
  },
};
</script>
